<template>
	<view class="myJobDetailBox">

		<view class="scrollDetailMyJob">

			<view class="flex  relative z-index10  pL15 pR15 pT20  jst-between">
				<view class="flex">
					<image class="w36 mL10 mR5 pT5" src="/static/image/checkCircle.png" mode=""></image>
					<view class="u-main font20">
						{{info?.enrollStatusText}}
					</view>
				</view>
				<image class="topImg mR25" :src="resources.lgEditImg" mode=""></image>
			</view>
			<view class="bgf mTf30 radius20 mB20 mL15 mR15 relative z-index20 pT10 pB10">
				<view class="flex pL15 pR15 alg-center jst-between pT10 u-borderFe7-bottom pB10">
					<view class="jobName  font18 bold u-3 w80">{{info?.realNameTwo}} <text
							class="u-6 font13">{{info?.userPhoneNo}}</text></view>
					<view @click="callPhone">
						<image class="imgW48" :src="resources.phoneGray" mode=""></image>
					</view>
				</view>
				<!-- <view class="font13 u-6 line24 u-borderFe7-bottom pB10 pL15 pR15">{{info?.homeAddress}}</view> -->
				<view class="pL15 pR15 pT10 font15">
					<!-- <view class="flex jst-between  alg-center">
						<view>用工人数</view>
						<view>{{info?.oddJobUseNum}}人</view>
					</view> -->
					<view class="flex jst-between  alg-center mT10">
						<view>用工工期</view>
						<view>{{info?.jobBeginTime}}~{{info?.jobEndTime}}</view>
					</view>
					<view class="flex jst-between  alg-center mT10">
						<view>工作时间</view>
						<view>{{info?.jobBeginDatetime}}-{{info?.jobEndDatetime}}</view>
					</view>
					<view class="flex jst-between  alg-center mT10 pB15">
						<view>工资金额</view>
						<view class="font18 u-red">{{info?.salary}}<text>元</text></view>
					</view>
				</view>
				<!-- 	<view class="pT10 PL15 pR15 flex jst-end">
					<view class="font14">
						<text class="bold">合计金额：</text>
						<text class="u-red font24 bold">200</text>
						<text class="u-red bold"> 元</text>
					</view>
				</view> -->
			</view>
			<view class="jobCard mL15  mR15">
				<view class="flex  alg-center jst-between">
					<view class="jobName   font20 bold u-3 w80">{{info?.oddJobName}}</view>
					<view class="font15 u-8bd"
						@click="xf.onlineUtils.route(`/pages/userPage/subpackge/oddJob/jobDetail/jobDetail?id=${info.oddjobInfoId}`)">
						更多信息</view>
				</view>
				<view class="flex alg-center mT5">
					<view class="jobTime">{{info?.jobBeginDatetime}}~{{info?.jobEndDatetime}}</view>
					<view class="jobTime">{{info?.salaryPaymentText}}</view>
					<view class="jobTime">招{{info?.oddJobUseNum}}人</view>
				</view>
				<view class="mT10">
					<text class="font24 u-red bold">{{info?.salary}}</text>
					<text class="u-red font14 bold">元</text>
				</view>
				<view class="mT10 posBox">
					<view class="flex jst-between pT10">
						<view class="jobPos flex alg-center ">
							<image class="posImg" :src="resources.posIcon" mode=""></image>
							<text class="mL5 font15 u-3">{{info?.provinceName}}-{{info?.cityName}}-{{info?.areaName}}</text>
						</view>
						<view @click.stop="xf.openMap({lat:info.latitude,lon:info.longitude,address:info?.hopeWorkAddress})">
							<u-image :width="42" :height="42" :src="resources.route" mode=""></u-image>
						</view>
					</view>
					<view class="flex alg-center jst-between mT5">
						<view class="u-8bd font13 pL20 w80">
							{{info?.hopeWorkAddress}}
						</view>
						<view class="u-6 font13">
							{{info?.distance}}
						</view>
					</view>
				</view>

			</view>

			
			<view class="mL15 mR15 mT15">
				<view class="u-3 font18 bold mB15">职位发布者</view>
				<view class="radius20 bgf pT15 pB15 pL15 pR15">
					<view class="flex pB15 jgGs mB15" v-if="info?.oddReleaseType==2" @click="xf.onlineUtils.route( `/pages/common/jggs/index?id=${info.regulatoryId}`)">
						<u-image v-if="info?.regulatoryProfile" :width="90" :height="90"
							:src="xf.getImgUrl(info?.regulatoryProfile)" mode=""></u-image>
						<image v-else class="imgW90" :src="resources.defaultHeader" mode=""></image>
						<view class="companyInfo mL10">
							<view class="font16 bold">{{info?.regulatoryName}}</view>
							<view class="flex alg-center mT5">
								<image class="w24" :src="resources.jgGsIcon" mode=""></image>
								<text class="font13 u-6 mL5">监管认证</text>
							</view>
						</view>
					</view>

					<view class="flex" @click="jumpPersonDetail">
						<u-image :width="90" :height="90" v-if="info?.comOrUserProfile"
							:src="xf.getImgUrl(info?.comOrUserProfile)" mode=""></u-image>
						<image v-else class="imgW90" :src="resources.defaultHeader" mode=""></image>
						<view class="companyInfo mL10">

							<view class="flex jst-between alg-center">
								<view>
									<view class="font16 bold">{{info?.comOrUserName}}</view>
									<view class="flex alg-center mT5">
										<image v-if="info?.oddReleaseType==1" class="w24" :src="resources.qyrzLogo"
											mode=""></image>
										<image v-if="info?.oddReleaseType==2" class="w24" :src="resources.grrzLogo"
											mode=""></image>
										<text
											class="font13 u-6 mL5">{{info?.oddReleaseType==1?'企业招工认证':'个人招工认证'}}</text>
										<image class="w24 mL12" :src="resources.star" mode=""></image>
										<text class="u-yellow mL5 font15">{{info?.branch}}</text>
									</view>
								</view>
								<view>
									<u-icon name="arrow-right" :size="28" :color="'#8d8d8d'"></u-icon>
								</view>
							</view>
							<view class="font15">在招职位 <text class="u-blue">{{info?.comOrUserWorkNum||0}}</text> 个</view>
						</view>

					</view>

				</view>
			</view>
			<view class="pL15 pR15" v-if="info?.xfJjpOddjobProcess?.length>0">
				<view class="font18 bold mB15 mT15">开工流程</view>
				<view class="pT15  pB5 pL15 pR15 radius20 bgf">
					<block v-for="(item,i) in info?.xfJjpOddjobProcess" :key="i">
						<view class="relative pL25 flowItem" v-if="i<1">
							<image class="imgW32 flowImg" :src="resources.circleFlow" mode=""></image>
							<view class="flex jst-between font12">
								<text>上传记录</text>
								<text class="u-8bd">{{item.createTime}}</text>
							</view>
							<view class="font15 line24">{{item.processNotes}}</view>
							<view class="flex flex-wrap mT10">
								<image @click="xf.previewImg([xf.getImgUrl(v)])" class="pjImg"
									v-for="(v,j) in getImgLis(item?.processPicture)" :key="j" :src="xf.getImgUrl(v)"
									mode=""></image>
							</view>
							<view class="flex alg-center">
								<image class="imgW32" :src="resources.posIcon" mode=""></image>
								<text class="font14">{{item?.processAddress}}</text>
							</view>
						</view>
					</block>

					<view @click="xf.onlineUtils.route(`pages/common/workFlowDetail/index?id=${info?.oddjobInfoId}`)"
						style="padding-left: 60rpx;" class="font14 pB10 u-8bd pointer">
						查看更多流程 >>
					</view>
				</view>
			</view>
			<view class="mL15 mR15 mT15" >
				<view class="u-3 font18 bold mB15" v-if="info?.enrollStatus!=0&&info?.enrollStatus!=5">订单详情</view>
				<view class="radius20 bgf pT15 pB15" >
					<view class="pL15 pR15 u-border-bottom pB15" v-if="info?.enrollStatus!=0&&info?.enrollStatus!=5">
						<view class="flex jst-between">
							<view>订单编号</view>
							<view class="u-text-right w65">{{info?.xfJjpOddjobOrder?.id}}</view>
						</view>
						<view class="flex jst-between  alg-center mT10">
							<view>招工类型</view>
							<view>{{info?.xfJjpOddjobOrder?.oddReleaseTypeText}}</view>
						</view>
						<view class="flex jst-between  alg-center mT10">
							<view>创建时间</view>
							<view>{{info?.xfJjpOddjobOrder?.createTime}}</view>
						</view>
						<block v-if="info?.xfJjpOddjobOrder?.orderType==4">
							<view class="flex jst-between  alg-center mT10">
								<view>用工开始时间</view>
								<view>{{info?.xfJjpOddjobOrder?.jobBeginTime}}</view>
							</view>
							<view class="flex jst-between  alg-center mT10">
								<view>用工结束时间</view>
								<view>{{info?.xfJjpOddjobOrder?.jobEndTime}}</view>
							</view>
						</block>
					</view>
					<view class="flex jst-between pT15">
						<view class="flex alg-center w50 flex-v jst-center u-border-right">
							<image class="imgW32" :src="resources.chatKf" mode=""></image>
							<view class="t-center font12 mT5">客服</view>
						</view>
						<view class="flex alg-center w50 flex-v jst-center"
							@click="xf.onlineUtils.route(`/pages/common/ssForm/index?id=${info?.xfJjpOddjobOrder?.id}`)">
							<image class="imgW32" :src="resources.ssForm" mode=""></image>
							<view class="t-center font12 mT5">申诉</view>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="title!='订单详情'&&title!='报名详情'&&info?.xfJjpOddjobOrder?.orderType!=3" class=" bottomFixed pT10 pB10 bgf font16 flex jst-center">
				<view
					@click="xf.onlineUtils.route(`pages/common/startWorkCode/index?orderId=${info?.xfJjpOddjobOrder?.id}`)"
					class="rightNowPay t-center u-f" v-if="info?.xfJjpOddjobOrder?.orderType==1">
					开工码
				</view>
				<view
					@click="xf.onlineUtils.route(`pages/common/commentForm/index?id=${info?.oddjobInfoId}&orderId=${info?.xfJjpOddjobOrder?.id}&jobType=company`)"
					class="rightNowPay t-center u-f" v-else-if="info?.xfJjpOddjobOrder?.orderType==4&&info?.izEvaluate!=1">
					去评价
				</view>
				<block v-else-if="info?.xfJjpOddjobOrder?.orderType==2">
					<view class="w50 mL15 mR10 bg06c t-center u-f font15 line45 radius20"
						@click.stop="xf.onlineUtils.route(`/pages/common/uploadPz/index?id=${info?.xfJjpOddjobOrder?.xfOddjobInfoId}&orderId=${info?.xfJjpOddjobOrder?.id}&type=1`)">
						上传凭证
					</view>
					<view class="mL10 w50 bg-blue t-center u-f font15 line45 mR15 radius20"
						@click.stop="xf.onlineUtils.route(`/pages/common/uploadPz/index?id=${info?.xfJjpOddjobOrder?.xfOddjobInfoId}&orderId=${info?.xfJjpOddjobOrder?.id}&regisId=${info?.xfJjpOddjobOrder.registrationId}&type=2`)">
						已完工
					</view>
				</block>
			</view>
		</view>
		<xfTipModal ref="tipModal"></xfTipModal>
	</view>
</template>

<script>
	import {
		myJobDetail
	} from '@/api/userInterface/user.js'
	import {
		getLocal
	} from "@/libs/map.js"
	import { getPhone } from "@/api/userInterface/job"
	export default {
		components: {

		},
		data() {
			return {
				loading: false,
				id: null,
				isPerson: null,
				showModal: false,
				status: 5,
				info: {},
				query: {
					latitude: "",
					longitude: '',
					needInfoid: '',
					regisid: ''
				},
				title:''
			};
		},
		 onLoad(e) {
			 
			if (e.title) {
				this.title=e.title;
				//根据title 等于 订单详情 判断是否是从订单管理跳转过来，订单管理是自己发布的职位，所以没有底部操作按钮
				uni.setNavigationBarTitle({
					title: decodeURI(e.title)
				})
			}
			
			this.isPerson = e.isPerson
			this.query.needInfoid = e.id;
			this.query.regisid = e.regisId;
			if(e.xfOddGeneralId){
				this.query.xfOddGeneralId=e.xfOddGeneralId
			}
			this.getDetail()

		},
		methods: {
			async getDetail() {
				const {lat,lon} = await this.xf.getLatOrLon();
				this.query.latitude = lat;
				this.query.longitude = lon;
				myJobDetail(this.query).then(res => {
					this.info = res.result;
				})
			},
			getImgLis(v) {

				if (v.length > 0) {
					console.log(v.split(','))
					return v.split(',')
				} else {
					return []
				}
			},
			jumpPersonDetail() {
				let id = this.info.oddReleaseType == 1 ? this.info.comId : this.info.xfOddUserId;
				uni.navigateTo({
					url: `/pages/common/personOrcompnayInfo/index?id=${id}&isPerson=${this.info?.oddReleaseType}`
				})
			},

			callPhone() {
				let that = this;
				let id = that.info.comOrUserId
				getPhone({
					acquirerId: id
				}).then(res => {
					const {result} = res
					if (result.code && result.code == 201){
						let htmlStr = `<p class="mT10">拨打电话需支付<span class="u-red">2元</span></p>`
						this.$refs.tipModal.open({
							slotHtml: htmlStr,
							btnText: "拨打",
							showCancel: true,
							success: function() {
								that.xf.jumpPayPage(`acquirerId=${id}`)
							}
						})
					} else {
						this.$refs.tipModal.open({
							content: "确认拨打电话吗？",
							btnText: "拨打",
							showCancel: true,
							success: function() {
								that.xf.callPhone({
									acquirerId: id
								})
							}
						})
					}	
				})
			}

		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
	}
</style>
<style scoped lang="scss">
	.flowItem {
		margin-bottom: 40rpx;

		&:before {
			position: absolute;
			height: calc(100% - 60rpx);
			content: "";
			width: 3rpx;
			background: #3291F8;
			left: 8rpx;
			top: 60rpx;
		}

		.flowImg {
			position: absolute;
			left: -10rpx;
			top: -3rpx;
		}

		.pjImg {
			width: 174rpx;
			height: 174rpx;
			margin-bottom: 20rpx;
			margin-right: 20rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}

	.rightNowPay {
		width: 670rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #3291F8;
		border-radius: 30rpx;
	}

	.myJobDetailBox {
		padding-bottom: 180rpx;
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
	}

	.jobCard {
		margin-top: -10rpx;
	}

	.topImg {
		width: 130rpx;
		height: 116rpx;
	}

	.scrollDetail {
		position: relative;
		z-index: 5;
	}

	.jgGs {
		border-bottom: 2rpx solid #F6F6F6;
	}

	#scroll-view-h {
		padding-bottom: 160rpx;
	}

	.rightImg {
		width: 9rpx;
		height: 18rpx;
	}

	.phoneImg {
		width: 48rpx;
		height: 48rpx;
		margin: 0 auto;
	}

	.bgImg {
		position: fixed;
		width: 100%;
		z-index: 0;
		top: 0;
		/* #ifdef MP-WEIXIN */
		top: 100rpx;
		/* #endif */
	}

	.posBox {
		border-top: 2rpx solid #F6F6F6;
	}

	.companyInfo {
		width: calc(100% - 110rpx);
	}

	.jobCard {
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.jobName {
			width: 70%;
		}

		.jobLeft {
			max-width: 70%;
		}

		.jobStatus {
			border: 2rpx solid #FF0000;
			border-radius: 10rpx;
			height: 34rpx;
			line-height: 34rpx;
			padding: 0 10rpx;
			margin-right: 10rpx;
		}

		.jobTag {
			height: 34rpx;
			line-height: 34rpx;
			padding: 0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
		}

		.jobMoney {
			word-break: keep-all;
		}

		.jobTime {
			color: #8D8D8D;
			font-size: 26rpx;
			margin-right: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-top: 16rpx;
		}

		.posImg {
			width: 32rpx;
			height: 32rpx;
		}

		.posTxt {
			width: calc(100% - 42rpx);
			font-weight: 400;
			font-size: 26rpx;
			color: #8D8D8D;
		}

		.companyImg {
			width: 48rpx;
			height: 48rpx;
		}

		.rzImg {
			width: 24rpx;
			height: 24rpx;
		}

		.companyName {
			font-weight: 500;
			font-size: 30rpx;
			color: #333;
			margin-right: 10rpx;
			margin-left: 10rpx;
		}
	}
</style>